<template>
  <div class="echong">
    <Bb/>
    <div class="top">
            <div class="p">我的E宠</div>
             <div class="arrow" @click="tui()">
            </div>
            <div class="xiaoxi" > 
            </div>
      </div>
      <div class="zhanwei"></div>
    <div class="userinfo">
      <div class="operation">
        <div class="o1 oo">
          <img src="h/set.png"/>
        </div>
        <div class="o2 oo">
          <img src="h/xiaoxi.png"/>
        </div>
        
      </div>
      <div class="user_info">
        <div class="fl">
          <img src="h/rt.jpg"/>
        </div>
        <div class="fr">
          <p>主人_rcvWax0gMs</p>
          <div class="grade">
            <img src="h/V0.png"/>
            <em>宠值0</em>
          </div>
        </div>
        
      </div>
      <div class="vip">
       <img src="h/1.png" /> 
      
      </div>
    </div>
     <!-- 我的订单-->
    <div class="mymould">
     
      <div class="mymould1">
        <span>我的订单</span>
        <div class="arrow"></div>
        <span>查看全部</span>
        
      </div>
      <div class="mymould2">
        <div class="f1">
            <img src="h/item.png" />
            <p>代付款</p>
        </div>
        <div class="f1">
            <img src="h/item.png" />
            <p>代付款</p>
        </div>
        <div class="f1">
            <img src="h/item.png" />
            <p>代付款</p>
        </div>
        <div class="f1">
            <img src="h/item.png" />
            <p>代付款</p>
        </div>
        <div class="f1">
            <img src="h/item.png" />
            <p>代付款</p>
        </div>
        
      </div>
    </div>
  <div class="mypet">
   <div class="mypet1">
        <span>我的宠物</span>
        <div class="arrow"></div>
        <span>查看更多</span>
    </div>
   
  <div class="mypet2">
      <div class="fl">
          <img src="h/rt.jpg"/>
      </div>
      <div class="fr">
          <p>哈哈哈</p>
          <div class="grade">
            <span>英国短毛猫 7天</span>
          </div>
      </div>
    </div>
       
  </div>
  <div class="myservice">
    <div class="s1">
        <span>工具与服务</span>
        <div class="arrow"></div>
        <span>查看更多</span>
    </div>
    <div class="s2">
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>

      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>

      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
      <div class="item">
        <img src="h/sitem1.png"/>
        <p>周期配送</p>
      </div>
    </div>
    
  </div>

  </div>
</template>

<script>
export default {
  methods:{
    tui(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.zhanwei{
  height: .5rem;
}
.echong{
  background-color: #f6f6f6;
   .top{
            width: 100%;
            height: .5rem;
        //    padding-top: .5rem;
            z-index: 100;
            position: fixed;
            top: 0px;
            background-color: #fff;
                .p{
                    text-align: center;
                    height: .5rem;
                     line-height: .5rem;
                    padding: 0 .65rem;
                }   
                .xiaoxi,.arrow{
                    width: .35rem;
                    height: .35rem;
                    position: absolute;
                    top: .07rem;
                    // background-color:orange ;
                   
                }
                 .arrow{
                    left: .05rem;
                   
                     background-size: 35px auto;
                    background-image:url(../../public/arrowz.png);
                     background-position:  0 0;

                }
                .xiaoxi{
                     right: .05rem;
                       background: url(../../public/arrowz.png) ;
                         background-position: 0 -.7rem;
                    background-size: 35px auto;
                }
               
        }
    .userinfo{
      width: 100%;
      background-image: url(../../public/bg1.jpg);
      background-size:100% ;
      padding-top: .2rem;
      overflow: hidden;
      margin-bottom: .2rem;
      
      .operation{
        width: 100%;
        padding: 0 .2rem;
        .oo{
          width: .24rem;
          height: .24rem;
          img{
            width: .24rem;
            height: .24rem;
          }
        }
        .o1{
          float: left;
        }
        .o2{
          float: right;
        }
      }
      .user_info{
        margin: .3rem 0;
        width: 100%;
        padding-left: .2rem;
              overflow: hidden;

        .fl{
          width: .7rem;
          float: left;
          overflow: hidden;
          border-radius: 50%;
          img{
            width: .7rem;
            height: .7rem;
          }
        }
        .fr{
          // width: 2.75rem;
          height: .58rem;
          float:right;
          margin-left: .1rem;
          padding-top: .1rem;
          .grade{
            width:2.75rem ;
            height: .25rem;
             img{
            width: .36rem;
            display:block;
            float: left;
            height: .16rem;
          }
           em{
          width:.42rem ;
        display:block;
        float: left;
          height: .16rem;
          line-height: .10rem;
          padding: .04rem .05rem;
          margin-left: .05rem;
          font-size: .12rem;
          font-style: normal;
          color: white;
          background-color: #fd8657;
          border-radius: 30px;

        }
            // margin-left: 1rem;
          }
          p{
            margin-bottom: .1rem;

          }
         
        }
      }
      .vip{
       
        img{
          width: 100%;
          height: .35rem;
          display: block;
        }
       
      }
    }
  .mymould{
    width: 100%;
    height:1.16rem;
    background-color: #fff;
    padding: .1rem;
    .mymould1{
      width: 100%;
      height: .35rem;
      span{
        display: block;
        line-height: .35rem;
      }
      span:nth-child(1){
        float: left;
        // padding: .1rem;
      }
      .arrow{
        float: right;
        margin-top: .1rem;
        width:.12rem;
        height: .12rem;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        transform: rotate(45deg);
       margin-left: .05rem;
        margin-right: .1rem;
      }
      span:nth-child(3){
        float: right;
      }
     
    }
    .mymould2{
      margin-top: .1rem;
      width: 100%;
      height: .615rem;
      display: flex;
      margin-bottom: .2rem;
      .f1{
          width: .71rem;
          height: .5105rem;
          text-align: center;
          font-size: .13rem;
        img{
          width:.2475rem;
          display: block;
          margin:auto;
          height: .2475rem;
          // vertical-align: .1rem;
        }
      }
    }
    
  }
  .mypet{
       width: 100%;
    height:1.16rem;
    margin-top: .2rem;
    background-color: #fff;
    padding: .1rem;
       .mypet1{
      width: 100%;
      height: .35rem;
      span{
        display: block;
        line-height: .35rem;
      }
      span:nth-child(1){
        float: left;
        // padding: .1rem;
      }
      .arrow{
        float: right;
        margin-top: .1rem;
        width:.12rem;
        height: .12rem;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        transform: rotate(45deg);
       margin-left: .05rem;
        margin-right: .1rem;
      }
        span:nth-child(3){
          float: right;
        }
     
      }
     .mypet2{
       width: 100%;
        .fl{
          float: left;
          width: .5rem;
          height: .5rem; 
          img{
            width: .5rem;
            height: .5rem;
          }
        }
        .fr{
          margin-left: .1rem;
          margin-top: .1rem;
          font-size: .13rem;
          color:#333;
          height: 100%;
            
          float: left;
       
         span{
              margin-top: .05rem;
              color: #999;
              background-color: #f3f4f5;
            }
        
        }
        
     }
    }
    .myservice{
       width: 100%;
    height:1.16rem;
    margin-top: .2rem;
    background-color: #fff;
    padding: .1rem;
       .s1{
      width: 100%;
      height: .35rem;
      span{
        display: block;
        line-height: .35rem;
      }
      span:nth-child(1){
        float: left;
        // padding: .1rem;
      }
      .arrow{
        float: right;
        margin-top: .1rem;
        width:.12rem;
        height: .12rem;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        transform: rotate(45deg);
       margin-left: .05rem;
        margin-right: .1rem;
      }
        span:nth-child(3){
          float: right;
        }
     
      }
      .s2{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item{
          width: .83rem;
          text-align: center;
          height: .49rem;
          color: #333;
          margin-top: .1rem;
          font-size: .12rem;
          padding-top: .05rem;
          img{
            display: block;
            margin: 0 auto;
            // padding-top: .1rem;
              width: .19rem;
              height: .19rem;

          margin-bottom: .05rem;
          }
        }
      }



    }


}

</style>